<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <h1>Chainlit Window Message Test</h1>
  <iframe src="http://127.0.0.1:8000/" id="the-frame" data-cy="the-frame" width="100%" height="500px"></iframe>
  <div id="message">No message received</div>
  <button onclick="postMessageToIframe()">Send message to iframe</button>
  <script>
      window.addEventListener('message', function(event) {
          if (event.data.startsWith("Server: ")) {
              document.getElementById('message').innerText = event.data;
          }
      });

      function postMessageToIframe() {
          const iframe = document.getElementById('the-frame');
          iframe.contentWindow.postMessage('Client: Hello from parent window', '*');
      }
  </script>
</body>

</html>